<template>
	<view v-if="items.length > 0" class="main_content1">
		<!-- <view v-for="(item, index) in items" :key="index" class="product1">
			<text class="product_spotName1">{{ item.spotName }}</text>
			<text class="product_spotIntro1">{{ item.spotIntro }}</text> -->
			<!-- <image class="product_imgUrl1" :src="item.imgUrl"></image> -->
			<!-- <view class="product_imgUrl1">
				<image v-for="(imgUrl, imgIndex) in item.imgUrls" :key="imgIndex" :src="imgUrl" class="image"
					mode="aspectFill"></image>
			</view> -->
		<!-- </view> -->
		<view class="product">
			<rich-text :nodes="item1.spotSelf"></rich-text>
			<!-- <rich-text :nodes="item1.spotSelf" class="product_spotSelf"></rich-text> -->
			<!-- <text class="product_spotSelf" v-html=" item1.spotSelf"></text> -->
		</view>
		

	</view>
</template>

<script>
	import {
		isBindAgentAPI
	} from '../../../api/common.js';
	import { mapState} from 'pinia'
	import { useUserInfoStore} from '../../../stores/userInfo.js'
	export default {
		props: {
		   item1: {  
		     type: Object,  
					  
		   },
		 },
		name: 'price',
		data() {
			return {
				items: [], // 存放从后端获取的商品列表数据
			};
		},
		mounted() {
			this.fetchProductList(); // 页面加载时调用获取商品列表的方法
		},
		computed:{
			...mapState(useUserInfoStore,['id','phone','username','state'])
		},
		methods: {
			fetchProductList() {
				uni.request({
					url: '/api/common/listAll', // 后端接口地址
					method: 'GET',
					success: (res) => {
						// console.log('旅游数据：', res.data);
						// this.items = res.data.data; // 将返回的旅游列表数据保存到 items 中
						// this.$nextTick(() => {
						// 	console.log('数据已更新，进行页面渲染');
						// });
						// 假设res.data.data是一个包含多个对象的数组，每个对象都有一个imgUrl字段  
						this.items = res.data.data.map(item => ({
							...item, // 复制其他所有属性  
							imgUrls: item.imgUrl ? item.imgUrl.split(' ') :
						[], // 如果imgUrl存在，则分割成数组；否则，默认为空数组  
						}));
						// console.log('更新后的items:', this.items);
					},
					fail: (err) => {
						console.error('请求失败：', err);
					}
				});
			}
		},
	};
</script>

<style scoped>
	.main_content1 {
		border: 1px solid whitesmoke;
		border-width: 1px 10px;
		display: flex;
		flex-direction: column;
		height: 500px;
		padding-left: 15px;
	}

	.product1 {
		padding: 10px;
	}

	.product_spotName1 {
		font-size: 33rpx;
		font-weight: bold;
		margin-bottom: 3px;
		width: 800rpx;
		float: left;
	}

	.product_spotSelf {
		color: darkgray;
		font-size: 28rpx;
		width: 600rpx;
		float: left;
		padding-top: 2px;
	}

	.main_content1 text {
		margin-bottom: 3px;
	}

	.main_content1 image {
		width: 130px;
		height: 100px;
		border-radius: 5px;
		margin-right: 10px;
		margin-top: 5px;
		display: flexbox;
	}

	.main_content1 view {
		/* margin-bottom: 10px; */
	}
</style>